<template>
  <div class="blackboard-toolbar">
    <img src="../../assets/chalk.png" alt @click="onClick" draggable="false" />
  </div>
</template>
<script>
export default {
  name: 'blackboard-toolbar',
  data () {
    return {
      color: '#eee',
    }
  },
  methods: {
    onClick (e) {
      this.color = this.getColor(e.offsetX / e.target.width)
      this.$emit('on-color-change', this.color)
    },
    getColor (position) {
      if (position < 0.082) {
        return '#eeeeee'
      }
      if (position < 0.164) {
        return '#ca8b65'
      }
      if (position < 0.243) {
        return '#d1dc5d'
      }
      if (position < 0.332) {
        return '#aada77'
      }
      if (position < 0.414) {
        return '#a8a4bf'
      }
      if (position < 0.497) {
        return '#d6c59b'
      }
      if (position < 0.578) {
        return '#b56185'
      }
      if (position < 0.665) {
        return '#aeab60'
      }
      if (position < 0.752) {
        return '#6a74c4'
      }
      if (position < 0.836) {
        return '#81c48e'
      }
      if (position < 0.921) {
        return '#e9e9e9'
      }
      return '#c0ca59'
    },
  },
}
</script>
<style lang="scss">
.blackboard-toolbar {
  position: fixed;
  width: 100%;
  bottom: 10px;
  padding: 0 20px;
  font-family: "XinDiHeiBanBaoDiZi";
  overflow: hidden;
  img {
    transform: translateY(10px);
    float: right;
    width: 100%;
    max-width: 500px;
    display: block;
    transition: 0.2s;
    z-index: 2000;
    user-select: none;
    filter: drop-shadow(0 0 20px black);
    &:hover {
      cursor: pointer;
      transform: translateY(0);
    }
    &:active {
      transform: translateY(5px);
    }
  }
}
</style>
